<template>
	<view>
		<view class="namelist">
			<view class="left">
				<text>球桌名称</text>
			</view>
			<view class="right">
				<input type="text" placeholder="请输入球桌名称" v-model="name">
			</view>
		</view>
		<view class="pricelist">
			<view class="left">
				<text>球桌编号</text>
			</view>
			<view class="right">
				<input type="text" placeholder="请输入球桌编号" v-model="deviceNumber">
			</view>
		</view>
		<view class="pricelist">
			<view class="left">
				<text>灯控编号</text>
			</view>
			<view class="right">
				<input type="text" placeholder="请输入灯控编号" v-model="lightingNumber">
			</view>
		</view>
		<view class="statelist">
			<view class="left">
				<text>球桌状态</text>
			</view>
			<view class="right">
				<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
			</view>
		</view>
		<view class="pricelist">
			<view class="left">
				<text>球桌价格</text>
			</view>
			<view class="right">
				<input type="text" placeholder="请输入球桌价格" v-model="money">
			</view>
		</view>
		<view class="addbox">
			<view class="btn" @click="updateDesk">
				<text>确认修改</text>
			</view>
		</view>
		<view class="deletebox">
			<view class="btn" @click="deleteGood">
				<text>删除</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				id: "",
				storeId: '',
				value: 0,
				name: '',
				money: '',
				lightingNumber: '',
				deviceNumber: '',
				range: [{
						value: 1,
						text: "已开台"
					},
					{
						value: 0,
						text: "未开台"
					},
					{
						value: 2,
						text: "待结账"
					},
				],
			};
		},
		onLoad(e) {
			console.log(e);
			this.id = e.id;
			this.storeId = e.storeId;
			this.getDeskdata()
		},
		methods: {
			async deleteGood() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '请确认是否删除',
				    success: async function(res) {
						if (res.confirm) {							
							const {
								data: res
							} = await uni.$http.delete(
								`/cashier/${that.id}`);
							if (res.code !== 0) return uni.$showMsg(res.message);
							console.log(res.data);
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
							console.log('删除球桌成功!');
							uni.$showMsg('删除成功!')
						} else if (res.cancel) {
							console.log('取消删除');
						}
					}
				})

			},
			async getDeskdata() {
				const {
					data: res
				} = await uni.$http.get(
					`/cashier/getCashierById?id=${this.id}`
				);
				if (res.code !== 0) return uni.$showMsg(res.message);
				this.money = res.data.money;
				this.name = res.data.name;
				this.deviceNumber = res.data.deviceNumber;
				this.lightingNumber = res.data.lightingNumber;
				this.deviceState = res.data.deviceState;
				console.log(res.data, '球桌信息');

			},
			async updateDesk() {
				const data = {
					storeId: this.storeId,
					id: this.id,
					money: this.money,
					name: this.name,
					deviceState: this.value,
					deviceNumber: this.deviceNumber,
					lightingNumber: this.lightingNumber,
				};
				const {
					data: res
				} = await uni.$http.post(
					`/cashier/editCashier`, data
				);
				if (res.code !== 0) return uni.$showMsg(res.message);
				console.log(res.data, '修改球桌信息成功!');
				uni.$showMsg('修改成功!');
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
			},
			change(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.deletebox {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 2vh;

		.btn:active {
			background-color: rgba(225, 0, 0, 0.1);
		}

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 6vh;
			width: 80%;
			color: #fff;
			background-color: #d43030;
			font-size: 4vw;
		}
	}

	.addbox {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 7vh;

		.btn:active {
			background-color: rgba(255, 147, 111, 0.1);
		}

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 6vh;
			width: 80%;
			color: #fff;
			background-color: #ff8d1a;
			font-size: 4vw;
		}
	}

	.btnBox {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 8vh;
		background-color: #2a82e4;
		width: 60%;
		margin-top: 10vh;
		border-radius: 30rpx;

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 30rpx;
			font-weight: 700;
		}
	}

	.namelist {
		width: 100%;
		height: 7vh;
		background-color: #fff;
		margin-top: 3vh;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1vw;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

		.left {
			margin-left: 2vw;
		}

		.right {
			width: 40vw;
		}
	}

	.statelist {
		width: 100%;
		height: 7vh;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1vw;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

		.left {
			margin-left: 2vw;
		}

		.right:active {
			background-color: rgba(84, 195, 255, 0.1);
		}

		.right {
			margin-right: 2vw;
			font-size: 35rpx;
			width: 30vw;

			text:nth-child(1) {
				color: #2a82e4;
				margin-right: 3vw;
				border-radius: 10rpx;
				padding: 1vw;
			}
		}
	}

	.pricelist {
		width: 100%;
		height: 7vh;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1vw;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

		.left {
			margin-left: 2vw;
		}

		.right {
			width: 40vw;
		}
	}
</style>